<template>
  <el-container>
    <el-header class='approveHeader'>
      <div class='approveHeaderBox'>
        <span class='approveHeaderBoxTitle'>标题：{{this.taskInformationData.taskTitle}}</span><span class='approveHeaderBoxWord'>
          发起人：{{this.taskInformationData.submitUserName}}</span><span class='approveHeaderBoxWord'>发起时间：{{this.taskInformationData.startDate}}</span>
        <el-button type="text" style="float: right;" @click="goBack"><i class="el-icon-close approveHeaderBoxIcon"></i></el-button>
      </div>
    </el-header>
    <el-container style="overflow: hidden;">
      <el-main class="el-box approveMainBox">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="el-tabs-bg el-flex el-tabs-flex approveTabs">
          <el-tab-pane label="业务详情" name="first" class="el-flex" style="overflow: auto;">
            <el-form label-width="100px" :model='taskInformation' style="padding:0 30px;">
              <el-form-item class="approveTableTitle" label="请假单编码 :" prop="applyCode">
                <el-col :span="12">
                  <span>{{taskInformation.applyCode}}</span>
                </el-col>
              </el-form-item>
              <el-form-item label="部门 :" prop="applyDept">
                <el-col :span="12">
                  <el-input placeholder="请输入部门" v-model="taskInformation.applyDept" auto-complete="off"></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="请假事由 :" prop="applyDesc">
                <el-col :span="12">
                  <el-input placeholder="请输入请假事由" v-model="taskInformation.applyDesc" auto-complete="off"></el-input>
                </el-col>
              </el-form-item>
              <div style="display: flex;">
                <el-form-item label="开始日期 :" prop="startDate">
                  <el-col :span="5">
                    <el-date-picker :picker-options='startDate' @blur='blur' v-model="taskInformation.startDate" type="date"
                      placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-col>
                </el-form-item>
                <el-form-item label="结束日期 :" prop="endDate">
                  <el-col :span="7">
                    <el-date-picker :picker-options='endDate' @blur='blur' v-model="taskInformation.endDate" type="date"
                      placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-col>
                </el-form-item>
              </div>
              <el-form-item label="请假天数 :" prop="days">
                <el-col :span="12">
                  <span>{{taskInformation.days}}</span>
                </el-col>
              </el-form-item>
              <el-form-item label="申请日期 :" prop="applyDate">
                <el-col :span="12">
                  <span>{{taskInformation.applyDate}}</span>
                </el-col>
              </el-form-item>
              <el-form-item label="创建人 :" prop="createdBy">
                <el-col :span="12">
                  <span>{{taskInformation.createdBy}}</span>
                </el-col>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="流程监控" name="second" class="el-flex">
            <processMonitorChart :childInstanceId="this.taskInformationData.instanceId"></processMonitorChart>
          </el-tab-pane>
          <div style="text-align: right;margin-bottom: 8px;margin-right: 8px;">
            <el-button type="primary" @click="funcSaveEvt">
              提交
              <i class="el-icon-document-checked el-icon--right"></i>
            </el-button>
            <el-button type="danger" @click="returnBack">
              返回
              <i class="el-icon-refresh-left"></i>
            </el-button>
          </div>
        </el-tabs>
      </el-main>
      <el-aside class="el-box-column" style='padding: 10px 0 0 0;width: 30%;min-width: 368px;'>
        <el-card class="el-flex el-card-flex" style="border-radius: 4px;">
          <div slot="header" class="clearfix">
            <span class='appoveCard' style="color: #1890FF;font-size:16px">审批记录</span>
          </div>
          <div class="block" style="overflow: auto;">
            <approvalHistory :approveListData="approveListData"></approvalHistory>
          </div>
        </el-card>
      </el-aside>
    </el-container>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="请选择员工" :visible.sync="dialogVisible"
      width="30%" :before-close="handleClose">
      <el-input style="width: 285px;" placeholder="请输入搜索内容" v-model="search"></el-input>
      <el-table ref="dormitoryTable" :data="tables" border stripe style="width: 100%;margin-top:10px;margin-bottom:10px"
        height="100%">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="name" label="员工编码"></el-table-column>
        <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="address" label="员工姓名"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
  import {
    Tree,
    Dialog,
    MessageBox,
    Message,
    TabPane,
    Table,
    TableColumn,
    Timeline,
    TimelineItem,
    Tag,
    Tabs
  } from 'element-ui';
  import processMonitorChart from '@/views/workflow/processMonitorChart/processMonitorChart';
  import approvalHistory from '@/views/workflow/approvalHistory/approvalHistory';
  import {
    workflowdDemoSelectByInsId,
    workflowApprovalHistory
  } from '@/api/affairs/leave/leaveApprove.js';
  import {
    workflowCompleteTask,
    workflowdDemoUpate
  } from '@/api/affairs/leave/leave.js'
  export default {
    name: '',
    components: {
      //注册插件
      'el-tree': Tree, //树形菜单
      'el-dialog': Dialog, //弹窗
      'el-tab-pane': TabPane, //导航
      'el-table': Table, //表格
      'el-table-column': TableColumn, //表格列
      'el-timeline-item': TimelineItem, //时间轴
      'el-timeline': Timeline, //时间轴
      'el-tag': Tag,
      'el-tabs': Tabs,
      processMonitorChart, //工作流程图组件
      approvalHistory //工作流时间轴
    },
    data() {
      return {
        taskInformationData: {
          activityInsId: "",
          activityName: "",
          activityUser: "",
          activityUserName: "",
          approvalOpinion: "",
          endDate: "",
          instanceId: "",
          opcode: "",
          opcodeName: "",
          processId: "",
          startDate: "",
          submitUser: "",
          submitUserName: "",
          taskDesc: "",
          taskHisId: "",
          taskId: "",
          taskTitle: "",
          taskUrl: "",
          upActivityName: "",
          upActivityUser: ""
        },
        approveListData: [], //审批记录初始化数据源
        search: '',
        activeName: 'first',
        dialogVisible: false,
        taskInformation: {},
        textarea: "", //文本域初始化数据
        startDate: { //账户生效时间不能早于今天
          disabledDate: time => {
            if (this.taskInformation.endDate) {
              return (
                time.getTime() > new Date(this.taskInformation.endDate).getTime() //不能选择的时间值
              )
            }
          }
        },
        endDate: { // 账户失效时间不能早于账户生效时间
          disabledDate: time => {
            if (this.taskInformation.startDate) {
              return (
                time.getTime() < new Date(this.taskInformation.startDate).getTime() - 8.64e7 // 加- 8.64e7则表示包当天
              )
            }
          }
        }
      };
    },
    created() {
      if (this.$route.params.instanceId == null) {
        this.$router.go(-1)
      } else {
        this.taskInformationData = this.$route.params //接收动态路由参数
        this.approveData()
        this.daysInfoData()
      }
    },
    computed: {
      // 模糊搜索
      tables() {
        const search = this.search
        if (search) {
          return this.dormitory.filter(data => {
            return Object.keys(data).some(key => {
              return String(data[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.dormitory
      }
    },
    methods: {
      funcSaveEvt() { //提交
        this.taskInformation.isSubmit = 'Y'
        console.log(this.taskInformation, 99)
        workflowdDemoUpate(this.taskInformation).then(res => {
          if (res.data.code == 10000) {
            Message.success("提交成功")
            this.$router.go(-1)
          }
        }).catch(error => {
          Message.warning("提交失败")
        })

      },
      handleClick(tab, event) {},
      daysInfoData() { //请假详情
        if (this.taskInformationData.instanceId == null) {
          this.taskInformation = []
        } else {
          // this.axios.get('/demo/selectByInsId/' + this.taskInformationData.instanceId)
          workflowdDemoSelectByInsId(this.taskInformationData.instanceId).then(res => {
            if (res.data.code == 10000) {
              this.taskInformation = res.data.data
            }
          })
        }
      },
      approveData() { //审批记录数据
        if (this.taskInformationData.instanceId == null) {
          this.approveListData = []
        } else {
          // this.axios.get('/workFlow/getApprovalHistory?instanceId=' + this.taskInformationData.instanceId)
          let data = {
            'instanceId': this.taskInformationData.instanceId,
            'page': 0,
            'pageSize': 0
          }
          workflowApprovalHistory(data).then(res => {
            if (res.data.code == 10000) {
              this.approveListData = res.data.data.records
            }
          })
        }
      },
      getTime() { //获取本地当前时间
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var today = year + '-' + month + '-' + strDate;

        this.dataList.applyDate = today
      },
      //计算两个时间段中间有多少天
      blur() {
        var star = this.taskInformation.startDate;
        var end = this.taskInformation.endDate
        var date1 = new Date(star);
        var date2 = new Date(end);
        var date = (date2.getTime() - date1.getTime()) / (1000 * 60 * 60 * 24) + 1; /*不用考虑闰年否*/
        if (star && end) {
          this.taskInformation.days = date
        } else {
          return
        }
      },
      handleClose(done) {
        this.dialogVisible = false
      },
      goBack() {
        this.$router.go(-1)
      },
      returnBack() { //返回
        this.$router.go(-1)
      },
      completeTask() {
        // this.axios.post('workFlow/completeTask', {
        //   "approvalOpinion": this.textarea,
        //   "opcode": "1000",
        //   "taskId": this.taskInformationData.taskId
        // })
        let data = {
          "approvalOpinion": this.textarea,
          "opcode": "1000",
          "taskId": this.taskInformationData.taskId,
          // "instanceId": this.taskInformationData.instanceId
        }
        workflowCompleteTask(data).then(res => {
          if (res.data.code == 10000) {
            Message({
              type: 'success',
              message: '审核通过'
            });
            this.$router.go(-1)
          }
        })
      },
      returnCompleteTask() {
        // this.axios.post('workFlow/completeTask', {
        //   "approvalOpinion": this.textarea,
        //   "opcode": "1001",
        //   "taskId": this.taskInformationData.taskId
        // })

        let data = {
          "approvalOpinion": this.textarea,
          "opcode": "1001",
          "taskId": this.taskInformationData.taskId,
          // "instanceId": this.taskInformationData.instanceId
        }
        workflowCompleteTask().then(res => {
          // this.dialogVisible = false;
          // this.search = ""
          if (res.data.code == 10000) {
            Message({
              type: 'success',
              message: '驳回成功'
            });
            this.$router.go(-1)
          }
        })
      }
    }
  };
</script>
<style lang='scss'>
  .dynamic {
    .el-textarea__inner {
      margin: 16px 0;
      padding: 16px !important;
      color: #666666;

    }
  }

  .approveHeader {
    height: 24px !important;
    margin-top: 14px;
    margin-bottom: 6px;
    padding: 0 16px;

    .approveHeaderBox {
      line-height: 24px;

      .approveHeaderBoxTitle {
        font-size: 18px;
      }

      .approveHeaderBoxWord {
        margin-left: 20px;
        font-size: 18px !important;
      }

      .approveHeaderBoxIcon {
        font-size: 18px;
        margin-top: -6px;
        color: #666666
      }
    }
  }

  .approveMainBox {
    padding: 10px 10px 0 0 !important;

    .approveTabs {
      border-radius: 4px;
    }
  }

  .approveSecondcard {
    margin-top: 10px;
    border-radius: 4px;
    padding: 0;

  }
</style>
